<template>
  <div>
    <van-row style="background: skyblue">
      <van-col span="6"></van-col>
      <van-col span="18" style="text-align: right"><headers /></van-col>
    </van-row>
    <van-row>
      <van-col span="6"><left /></van-col>
      <van-col span="18">
        <van-row>
          <p>
            职务名称:
            <input type="text" style="width: 220px" />&ensp;&ensp;&ensp;
            职务编码: <input type="text" style="width: 220px" />&ensp;&ensp;
            <button type="submit">+查询</button>&ensp;<button type="reset">
              重置
            </button>
          </p>
        </van-row>
        <van-row>
          <button style="background: blue">+添加</button>&ensp;&ensp;&ensp;
          <button>删除</button>&ensp;&ensp;&ensp;
          <button>导入</button>&ensp;&ensp;&ensp;
          <button>导出</button>
        </van-row>
        <p></p>
        <van-row>
          <table border="1">
            <tr>
              <td><input type="checkbox"></td>
              <td>序号</td>
              <td>职务名称</td>
              <td>职务编码</td>
              <td>职务排序</td>
              <td>操作</td>
            </tr>
            <tr v-for="(i,j) in positionlist" :key="j">
              <td><input type="checkbox"></td>
              <td>{{i.id}}</td>
              <td>{{i.name}}</td>
              <td></td>
              <td>{{j}}</td>
              <td>操作</td>
              
            </tr>
          </table>
        </van-row>
      </van-col>
    </van-row>
  </div>
</template>

<script>

import axios from "../../http/axios";
import headers from "./headers.vue";
import left from "./left.vue";
export default {
  components: {
    headers,
    left,
  },
  data() {
    return {
      positionlist:[]
    };
  },
  methods: {
    get_position(){
      axios('/posts','get').then(res=>{
        console.log(res)
        this.positionlist=res.list
      })
    }
    },
  mounted() {
    this.get_position()
  },
};
</script>

<style>
</style>